body {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Cambia a flex-start para que los elementos inicien desde arriba */
    min-height: 100%; /* Usa min-height en lugar de height para mayor adaptabilidad */
    margin: 0;
    background-color: #03002e;
    font-family: Arial, sans-serif;
    text-align: center;
}

.contenedor {
    max-width: 500px;
    padding: 5px; /* Espacio interno para todo el contenido */
    margin: 20px auto; /* Espacio centrado vertical y horizontal */
}

.imagenes {
    display: flex;
    flex-direction: column; /* Esto coloca las imágenes una encima de la otra */
    align-items: center; /* Centra las imágenes horizontalmente */
    margin: 0 auto 10px; /* Espaciado inferior para la leyenda */
}

.imagen2 {
    max-width: 100%;
    height: auto;
    margin: 10px 0; /* Espaciado entre las imágenes */
}

.leyenda {
    font-size: 24px;
    color: #77aac0;
    margin: 20px 0;
}

.enlaces a {
    text-decoration: none;
    color: #ffffffd4;
    font-size: 18px;
    margin: 0 10px;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    body {
        align-items: flex-start; /* Asegura que los elementos se ajusten correctamente en móviles */
    }

    .contenedor {
        max-width: 100%; /* Haz que ocupe toda la pantalla */
        margin-top: 0px; /* Ajusta el espacio superior */
    }

    .imagenes {
        width: 100%; /* Ajusta el ancho de las imágenes */
    }

    .leyenda {
        font-size: 18px; /* Reduce el tamaño del texto */
    }

    .enlaces a {
        font-size: 16px; /* Ajusta el tamaño de los enlaces */
    }
}